$(function(){
    var ball = $('.ball');
    var join = $('.join');
    var badge = $('.badge');
    var cart = $('.cart');
    

    join.click(function(){
       
        // 点击join的时候，小球在的位置
        var ball_joinX = join.offset().left + join.outerWidth() / 2 - ball.outerWidth() / 2;
        var ball_joinY = join.offset().top;
        ball.css({'left': ball_joinX, 'top': ball_joinY})
       ball.show()
       // 点击join后，小球所在位置
       var ball_inX = cart.offset().left + cart.outerWidth()/ 2 - join.outerWidth() / 2;
       var ball_inY = cart.offset().top - cart.outerWidth() / 2;
       ball.animate({'left': ball_inX, 'top': ball_inY}, function(){
           $(this).fadeOut()
           badge.html(parseInt(badge.html())+ 1)
       })

    })

})